<template>
  <div class="getH">
    <div class="naviga">&nbsp;&nbsp;{{$store.state.marketName}}>&nbsp;市场可获得性</div>
    <div class="top-bar">
      <img src="../../images/wicon.png"/>
      <p>数据来源于<span>淘宝/天猫</span>平台</p>
      <p>开通精确数据服务</p>
    </div>
    <div class="second-bar">
      <div class=" margin-top1">
        <div style="width: 75%;float: left">
          <span style="font-size: 14px;margin-left: 20px;float:left" >已选型号</span>
          <ul
          style="margin-left: 5px;float:left"
          v-for="item,index in tags1"
          :key="index"
          v-if="index<5"
          >
            <p :style="{background:item.color}">
              <span style="line-height:14px;padding:0 10px">{{item.brand}}</span><br/>
              <span style="line-height:14px;padding:0 10px">{{item.code}}</span>
            </p>
          </ul>
          <el-popover
            placement="bottom"
            width="400"
            trigger="click">
              <ul
                style="margin-left: 5px;float:left"
                v-for="item,index in tags2"
                :key="index"
                v-if='item'
                >
                <p :style="{background:item.color}" style="text-align:center;padding:5px;border-radius: 5px;">
                  <span style="line-height:14px;padding:0 5px">{{item.brand}}</span><br/>
                  <span style="line-height:14px;padding:0 5px">{{item.code}}</span>
                </p>
              </ul>
              <el-button slot="reference" style="margin-left:10px;background:none;border:none">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
          </el-popover>
        </div>
        <div style="width: 20%;float: right;margin-right:1%">
          <div v-if='label=="区域分布"' class="pull-right" style="width: 100%">
              <span class="demonstration" style="float: left;width: 30%;font-size: 14px;">选择日期</span>
              <ul class="data-month">
                  <el-date-picker :value="startMonth" type="month" @input="startChange"   placeholder="选择起始年月"></el-date-picker>
                  <span style="width:10%;">至</span>
                  <el-date-picker :value="endMonth" type="month" @input="endChange"  placeholder="选择结束年月"></el-date-picker>
                  <img style="width:16px;height:16px;margin-top:17px;"  src="../../images/clender.png"/>
              </ul>
          </div>
           <div v-if='label=="价格分析"' class="pull-right" style="width: 100%">
              <span class="demonstration" style="float: left;width: 30%;font-size: 14px;">选择日期</span>
              <ul class="data-month1">
                  <el-date-picker :value="endMonth1" type="month" @input="endChange1"   placeholder="选择起始年月"></el-date-picker>
                  <img style="width:16px;height:16px;margin-top:17px;"  src="../../images/clender.png"/>
              </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-12 border-r bor margin-top">
      <!--下拉框start-->
      <div class="indicators-wrap" v-if="isShow">
        <span>已选指标</span>
        <el-select class="indicators" style="width: 70%" v-model="norm1"  placeholder="更多">
          <el-option
            v-for="item in indicatorOption"
            :key="item.value"
            :label="item.norm"
            :value="item.norm">
          </el-option>
        </el-select>
      </div>
      <!--下拉框end-->
      <el-tabs type="border-card" @tab-click="tabChange">
        <!--单个start-->
        <el-tab-pane label="区域分布">
          <div class="col-xs-12 all" >
              <div class="col-xs-6" style="height: 400px;margin-bottom: 50px">
                <p>省份排名</p>
                <el-table
                  border
                  :data="provincesList"
                  :row-class-name="tableRowClassName"
                  style="width: 100%;height:100%;overflow: scroll">
                  <el-table-column
                    style="width: 20%"
                    type="index"
                    label="排名">
                  </el-table-column>
                  <el-table-column
                    style="width: 20%"
                    prop="province"
                    label="省份名称"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    style="width: 20%"
                    prop="salesCount"
                    label="销量">
                  </el-table-column>
                  <el-table-column
                    style="width: 20%"
                    prop="ratio"
                    label="占比">
                  </el-table-column>
                </el-table>
              </div>
            <div class="col-xs-6" style="height: 400px;margin-bottom: 50px">
              <!-- <div id="myChart" style="height: 400px"></div> -->
              <chart v-if="mapNum!=0" :options="mapOption" :auto-resize="true" style="width:100%;"></chart>
              <h3 v-if="mapNum==0" style="width: 100%;height:400px;text-align:center;line-height:400px;font-size:14px">暂无数据</h3>
            </div>
            <!--表格start-->
            <el-table
              border
              :data="areaList"
              :row-class-name="tableBot"
              class='oneTable'
              >
              <el-table-column
                prop="brandName"
                label="品牌">
              </el-table-column>
              <el-table-column
                prop="productCode"
                label="型号"
                width="180">
              </el-table-column>
              <el-table-column
                prop="province"
                label="销售区域">
              </el-table-column>
              <el-table-column
                prop="salesCount"
                sortable
                label="销售量">
              </el-table-column>
              <el-table-column
                prop="salesAmount"
                sortable
                label="销售额">
              </el-table-column>
              <el-table-column
                prop="ratio"
                label="区域占比">
              </el-table-column>
            </el-table>
            <!--表格end-->
              <!--分页start-->
    <div class="page-warp">
      <div class="paging">
      <span class="first-page"
            style="cursor: pointer"
            @click="change(1)"
      >首页</span>
        <el-pagination
          layout="prev, pager, next"
          prev-text='上一页'
          next-text='下一页'
          background
          @current-change="change"
          :current-page="page"
          :total="totalPage">
        </el-pagination>
      </div>
    </div>

    <!--分页end-->
          </div>
        </el-tab-pane>
        <!--单个end-->
        <el-tab-pane label="价格分析" >
          <div class="col-xs-12" style="padding: 0;background:#fff">
            <!--圆环-->
            <div v-if="piePrice!=0" class="pie" style='border-bottom:20px solid #f6f6f6'>
              <div v-for='item,index in pricePieData' v-if="isShowisShow" class="col-xs-3" style="height: 220px;display: flex;align-items: center">
               <aa :id='index' :piePriceData='item' pie='myChartPie' :key='index'></aa>
              </div>
            </div>
             <h3 v-if="piePrice==0" style="width: 100%;height:220px;text-align:center;line-height:220px;font-size:14px">暂无数据</h3>
            <!--圆环-->
            <!--柱状-->
            <div class="col-xs-12 bar">
              <div class='bar-btn' v-if="amountCount!=0">
                <p :style="{
                  background:labelClick=='销售额'?'#d9effc':'#fff',
                  border:labelClick=='销售额'?'none':'1px solid #cccccc',
                  color:labelClick=='销售额'?'#03a9f4':'#666666'
                  }"
                   @click="bottonClick('销售额')" >销售额</p>
                <p :style="{
                  background:labelClick=='销售量'?'#d9effc':'#fff',
                  border:labelClick=='销售量'?'none':'1px solid #cccccc',
                  color:labelClick=='销售量'?'#03a9f4':'#666666'
                  }"
                  @click="bottonClick('销售量')">销售量</p>
              </div>
              <div class="col-xs-12">

                <chart v-if="amountCount!=0" :options="barOption" :auto-resize="true" style="width:100%;height: 300px"></chart>
                <h3 v-if="amountCount==0" style="width: 100%;height:300px;text-align:center;line-height:300px;font-size:14px">暂无数据</h3>
                <!--表格start-->
                <el-table
                  border
                  :data="priceData"
                  :row-class-name="tableBot"
                  class='oneTable'
                  style="width: 100%;margin-top: 20px">
                  <el-table-column
                    prop="priceSegment"
                    label="价格段">
                  </el-table-column>
                  <el-table-column
                    prop="salesAmount"
                    label="月销售额"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="amountRatio"
                    label="销售额占比">
                  </el-table-column>
                  <el-table-column
                    prop="oneMonthRatio"
                    label="近一个月增幅">
                  </el-table-column>
                  <el-table-column
                    prop="threeMonthRatio"
                    label="近三个月增幅">
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="查看热销产品">
                       <template slot-scope="scope">
                          <el-button
                            type="text"
                            size="small">
                            本月热销产品
                          </el-button>
                       </template>
                  </el-table-column>
                </el-table>
                <!--表格end-->
                 <!--分页start-->
    <div class="page-warp">
      <div class="paging">
      <span class="first-page"
            style="cursor: pointer"
            @click="changePricePage(1)"
      >首页</span>
        <el-pagination
          layout="prev, pager, next"
          prev-text='上一页'
          next-text='下一页'
          background
          @current-change="changePricePage"
          :current-page="pricePage"
          :total="totalPricePage">
        </el-pagination>
      </div>
    </div>

    <!--分页end-->
              </div>
            </div>
            <!--柱状-->
          </div>

          </el-tab-pane>
          <el-tab-pane label="技术分析"> <div class="col-xs-12" style="padding: 0">
            <!--圆环-->
            <div v-if="techPieNum!=0" class="pie" style='border-bottom:20px solid #f6f6f6'>
             <div v-for='item,index in roleData' v-if="isShowisShow2" class="col-xs-3" style="height: 220px;display: flex;align-items: center">
               <aa :id='index' :pieRoleData='item' pie='myChartPie2' ></aa>
              </div>
            </div>
             <h3 v-if="techPieNum==0" style="width: 100%;height:220px;text-align:center;line-height:220px;font-size:14px">暂无数据</h3>
            <!--圆环-->
            <!--柱状-->
            <div class="col-xs-12 bar">
              <div class="col-xs-12">
                <!-- <div id="myChartStack" style="width:100%;height: 300px"></div> -->
                <chart v-if="techstackNum!=0" :options="stackOption" :auto-resize="true" style="width:100%;height: 300px"></chart>
                 <h3 v-if="techstackNum==0" style="width: 100%;height:300px;text-align:center;line-height:300px;font-size:14px">暂无数据</h3>
                <!--表格start-->
               <div class="table-bottom" v-if='ratios2!=0' >
                 <!--表格表头start-->
                 <ul class="sec">
                   <p v-for='item,index in roleListStart'>{{item}}</p>
                 </ul>
                 <ul :class="`sec sec${index%2}`" v-for="cont,index in cont111" >
                  <p style="cont" v-for="n in cont" >{{!isNaN(n.ratio)?(n.ratio*100).toFixed(2)+'%':n.ratio}}</p>
                 </ul>
                 <!--表格表头end-->
               </div>
                <!--表格end-->
              </div>
            </div>
            <!--柱状-->
          </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </template>
  <script>
import aa from "./pieEcharts/a";

export default {
  components: {
    aa
  },
  data() {
    return {
      //  focus:true,
      mapOption: {},
      stackOption: {},
      barOption: {},
      page: 1,
      totalPage: 1,
      pricePage: 1,
      totalPricePage: 1,
      isShowisShow: false,
      isShowisShow2: false,
      value: "",
      isShow: false,
      tags: [],
      areaList: [],
      provincesList: [],
      priceData: [],
      myChartBar: {},
      myChart: {},
      myChartPie: {},
      myChartStack: {},
      value8: "",
      options: [],
      indicatorOption: [],
      mapList: [],
      pricePieData: [],
      roleData: [],
      stackArr: [],
      timeLine: [],
      countArr: [],
      startMonth: "",
      endMonth: "",
      startMonth1: "",
      endMonth1: "",
      roleListStart: [],
      roleDataCont: [],
      leData: [],
      // tags1: [],
      tags2: [],
      cont111: [],
      colorArr: ["#ffe6ea", "#eae9fa", "#d8f3f7", "#fefbe2", "#e0f2fd"],
      label: "区域分布",
      norm1: "",
      brandArrLegend: [],
      priceArr: [],
      numArr1: [],
      labelClick: "销售额",
      mapNum: "",
      piePrice: "",
      amountCount: "",
      techPieNum: "",
      techstackNum: "",
      ratios2: "",
      objData: []
    };
  },
  mounted() {},
  computed: {
    tags1() {
      let dataTags1 = this.$store.state.brandArr;
      let objTags1 = {};
      for (var a in dataTags1) {
        let name = dataTags1[a].brand;
        objTags1[name] = { name };
        Object.keys(objTags1).map((key, i) => {
          console.log(key, i);
          if (dataTags1[a].brand == key) {
            dataTags1[a].color = this.colorArr[i];
          }
        });
      }
      this.tags2 = dataTags1.slice("5");
      return dataTags1;
    }
    // tags2(){

    // }
  },
  created() {
    let date = new Date();
    let mounth = date.getMonth() + 1;
    let year = date.getFullYear();
    this.endMonth = `${year}-${mounth}`;
    this.startMonth = this.getPreMonth(this.endMonth);
    console.log(this.startMonth);
    this.endMonth1 = `${year}-${mounth}`;
    this.startMonth1 = `${year}-${mounth}`;

    this.getindicator(); //获取角色管理下拉框
    this.getLeftErea(); //获取区域的左上角区域排名
    this.page = 1;
    this.pageSize = 10;
    this.getBottomModel(); //点击区域分布后获取下方列表
    this.getMap(() => {
      this.drawMap();
    });
  },
  methods: {
    //点击销售额或者销售量切换数据
    bottonClick(e) {
      console.log(e);
      this.labelClick = e;
      this.getBar(e, () => {
        this.drawLine();
      });
    },
    //区域分页
    change(e) {
      console.log(e);
      this.page = e;
      this.getBottomModel();
    },
    //价格分页
    changePricePage(e) {
      this.pricePage = e;
      this.getPriceBottom();
    },
    //改变开始年月
    startChange(e) {
      console.log(e);
      let t = e.getFullYear() + "-" + (e.getMonth() + 1);
      let data = new Date(e).getTime();

      let endData = new Date(this.endMonth).getTime();

      console.log(data, endData, data - endData);
      if (data > endData) {
        this.$message({
          message: "开始时间不能大于结束日期",
          type: "warning"
        });
        return;
      }
      this.startMonth = t;
      if (this.label == "区域分布") {
        //点击区域分布后获取下方列表
        this.getBottomModel();
        //点击区域分布后后去左上方列表
        this.getLeftErea();
        this.getMap(() => {
          this.drawMap();
        });
      }
      // else if (this.label == "价格分析") {
      //   //获取价格分析下方列表
      //   this.pricePage = 2;
      //   this.getPriceBottom();
      //   //获取价格分析圆形echart数据
      //   this.getPieDage();
      //   this.getBar(this.labelClick, () => {
      //     this.drawLine();
      //   });
      // } else if (this.label == "技术分析") {
      //   //获取角色管理下的饼状图
      //   this.getRolePie();
      //   //获取角色管理下的列表
      //   this.techPage = 1;
      //   this.getRoleList();
      //   //获取线性图
      //   this.getRoleData(() => {
      //     this.drawStack();
      //   });
      // }
    },
    //改变区域分布结束年月
    endChange(e) {
      let t = e.getFullYear() + "-" + (e.getMonth() + 1);
      console.log(t);
      let data = new Date(e);
      let startData = new Date(this.startMonth);
      if (data < startData) {
        this.$message({
          message: "结束时间不能小于开始时间",
          type: "warning"
        });
        return;
      }
      this.endMonth = t;
      if (this.label == "区域分布") {
        //点击区域分布后获取下方列表
        this.getBottomModel();
        //点击区域分布后后去左上方列表
        this.getLeftErea();
        this.getMap(() => {
          this.drawMap();
        });
      }
      //  else if (this.label == "价格分析") {
      //   //获取价格分析下方列表

      //   this.pricePage = 2;
      //   this.getPriceBottom();
      //   //获取价格分析圆形echart数据
      //   this.getPieDage();
      //   this.getBar(this.labelClick, () => {
      //     this.drawLine();
      //   });
      // } else if (this.label == "技术分析") {
      //   //获取角色管理下的饼状图
      //   this.getRolePie();
      //   //获取角色管理下的列表
      //   this.techPage = 1;
      //   this.getRoleList();
      //   //获取线性图
      //   this.getRoleData(() => {
      //     this.drawStack();
      //   });
      // }
    },
    //改变价格分析结束年月
    endChange1(e) {
      console.log(e);
      let t = e.getFullYear() + "-" + (e.getMonth() + 1);
      console.log(t);
      this.endMonth1 = t;
      this.startMonth1 = t;
      //获取价格分析下方列表

      this.pricePage = 2;
      this.getPriceBottom();
      //获取价格分析圆形echart数据
      this.getPieDage();
      this.getBar(this.labelClick, () => {
        this.drawLine();
      });
    },
    tabChange(e) {
      this.label = e.label;
      if (e.label == "区域分布") {
        this.isShow = false;
        this.isShowisShow = false;
        this.isShowisShow2 = false;
        //改变日期
        let date = new Date();
        let mounth = date.getMonth() + 1;
        let year = date.getFullYear();
        this.endMonth = `${year}-${mounth}`;
        this.startMonth = this.getPreMonth(this.endMonth);
        //点击区域分布后获取下方列表
        this.getBottomModel();
        //点击区域分布后后去左上方列表
        this.getLeftErea();
        //修改数据之后使用 $nextTick
        this.getMap(() => {
          this.drawMap();
        });
      } else if (e.label == "价格分析") {
        this.labelClick = "销售额";
        //   this.focus=true
        this.isShow = false;
        this.isShowisShow = true;
        this.isShowisShow2 = false;
        //改变日期
        let date = new Date();
        let mounth = date.getMonth() + 1;
        let year = date.getFullYear();
        this.endMonth1 = `${year}-${mounth}`;
        this.startMonth1 = `${year}-${mounth}`;
        //获取价格分析下方列表
        this.pricePage = 2;
        this.getPriceBottom();
        //获取价格分析圆形echart数据
        this.getPieDage();
        this.getBar(this.labelClick, () => {
          this.drawLine();
        });
      } else if (e.label == "技术分析") {
        console.log(456789);
        this.isShow = true;
        this.isShowisShow = false;
        this.isShowisShow2 = true;

        //改变日期
        // let date = new Date();
        // let mounth = date.getMonth() + 1;
        // let year = date.getFullYear();
        // this.endMonth = `${year}-${mounth}`;
        // this.startMonth = this.getPreMonth(this.endMonth);

        if (this.indicatorOption.length == 0) {
          return
        } else {
          this.norm1 = this.indicatorOption[0].norm;
        }
        //获取角色管理下的饼状图
        this.getRolePie();
        //获取角色管理下的列表
        this.techPage = 1;
        this.getRoleList();
        //获取线性图
        this.getRoleData(() => {
          this.drawStack();
        });
      }
    },
    //绘制地图
    drawMap() {
      console.log("上海市".indexOf("上海"));
      // 绘制图表
      var mapName = "china";
      var data = [
        { name: "北京", value: 177 },
        { name: "天津", value: 42 },
        { name: "河北", value: 102 },
        { name: "山西", value: 81 },
        { name: "内蒙古", value: 47 },
        { name: "辽宁", value: 67 },
        { name: "吉林", value: 82 },
        { name: "黑龙江", value: 66 },
        { name: "上海", value: 24 },
        { name: "江苏", value: 92 },
        { name: "浙江", value: 114 },
        { name: "安徽", value: 109 },
        { name: "福建", value: 116 },
        { name: "江西", value: 91 },
        { name: "山东", value: 119 },
        { name: "河南", value: 137 },
        { name: "湖北", value: 116 },
        { name: "湖南", value: 114 },
        { name: "重庆", value: 91 },
        { name: "四川", value: 125000 },
        { name: "贵州", value: 62 },
        { name: "云南", value: 83 },
        { name: "西藏", value: 9 },
        { name: "陕西", value: 80 },
        { name: "甘肃", value: 56 },
        { name: "青海", value: 10 },
        { name: "宁夏", value: 18 },
        { name: "新疆", value: 67 },
        { name: "广东", value: 123 },
        { name: "广西", value: 59 },
        { name: "海南", value: 14 }
      ];
      //获取地区信息
      let arr1 = this.mapList;
      console.log(arr1);
      for (var i in data) {
        data[i].value = 0;
        for (var a in arr1) {
          if (arr1[a].province.indexOf(data[i].name) > -1) {
            console.log(arr1[a].province.indexOf(data[i].name))
            arr1[a].province = data[i].name;
            data[i].value = arr1[a].ratio;
          }
        }
      }
      this.mapOption = {
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            if (typeof params.value[2] == "undefined") {
              let toolTiphtml = "";
              for (let i in arr1) {
                if (params.name == arr1[i].province) {
                  toolTiphtml +=
                    arr1[i].province +
                    "-整体占比" +
                    (arr1[i].ratio * 100).toFixed(2) +
                    "%" +
                    "<br>";
                  for (let a in arr1[i].smrList) {
                    toolTiphtml +=
                      parseInt(a) +
                      1 +
                      "." +
                      arr1[i].smrList[a].brandName +
                      "&nbsp;&nbsp;" +
                      "销量" +
                      arr1[i].smrList[a].salesCount +
                      "&nbsp;&nbsp;" +
                      "占比" +
                      (arr1[i].smrList[a].ratio * 100).toFixed(2) +
                      "%" +
                      "<br>";
                  }
                }
              }
              console.log(toolTiphtml);
              return toolTiphtml;
            } else {
              let toolTiphtml = "";
              for (let i in arr1) {
                console.log(arr1[i].province);
                if (params.name == arr1[i].province) {
                  toolTiphtml +=
                    arr1[i].province +
                    "-整体占比" +
                    arr1[i].ratio * 100 +
                    "%" +
                    "<br>";
                  for (let a in arr1[i].smrList) {
                    toolTiphtml +=
                      parseInt(a) +
                      1 +
                      "." +
                      arr1[i].smrList[a].brandName +
                      "&nbsp;&nbsp;" +
                      "销量" +
                      arr1[i].smrList[a].salesCount +
                      "&nbsp;&nbsp;" +
                      "占比" +
                      arr1[i].smrList[a].ratio * 100 +
                      "%" +
                      "<br>";
                  }
                }
              }
              console.log(toolTiphtml);
              return toolTiphtml;
            }
          }
        },
        visualMap: {
          show: false,
          min: 0,
          max: 1,
          inRange: {
            color: ["#aad9ef", "#35c2f8"]
          }
        },
        series: [
          {
            type: "map",
            map: mapName,
            itemStyle: {
              normal: {
                borderColor: "#fff"
              },
              emphasis: {
                borderColor: "#fff",
                areaColor: false
              }
            },
            data: data
          }
        ]
      };
    },
    drawLine() {
      // 绘制图表
      this.barOption = {
        color: [
          "#ff92a5",
          "#a8a2ee",
          "#64bef5",
          "#50d39a",
          "#3fcce1",
          "#50d39a"
        ],

        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: this.brandArrLegend,
          orient: "horizontal",
          right: 0,
          itemGap: 20
        },
        xAxis: [
          {
            type: "category",
            data: this.priceArr
          }
        ],
        yAxis: [
          {
            type: "value",
            name: this.labelClick
          }
        ],
        series: this.numArr1
      };
    },
    drawStack() {
      this.stackOption = {
        color: ["#e3c390", "#d29fc5", "#a6baf1", "#b1defa"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: this.leData,
          right: "20",
          icon: "roundRect"
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.timeLine
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "指数"
          }
        ],
        series: this.stackArr
      };
    },
    tableRowClassName(row) {
      if (row.rowIndex == 0) {
        return "first";
      } else if (row.rowIndex == 1) {
        return "second";
      } else if (row.rowIndex == 2) {
        return "three";
      }
    },
    tableBot(row) {
      if (row.rowIndex % 2 == 0) {
        return "bottomBak";
      }
    },
    //获取最近一个月的时间段
    getPreMonth(date) {
      console.log();
      var arr = date.split("-");
      var year = arr[0]; //获取当前日期的年份
      var month = arr[1]; //获取当前日期的月份
      var day = arr[2]; //获取当前日期的日
      var days = new Date(year, month, 0);
      days = days.getDate(); //获取当前日期中月的天数
      var year2 = year;
      var month2 = parseInt(month) - 1;
      if (month2 == 0) {
        year2 = parseInt(year2) - 1;
        month2 = 12;
      }
      var t2 = year2 + "-" + month2;

      return t2;
    },
    //获取左上方区域排名
    getLeftErea() {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getSMRCountData",
          query: {
            marketId: this.$store.state.id,
            startTime: this.startMonth,
            endTime: this.endMonth
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            let list = res.data.data;
            list.map((item, index) => {
              item.ratio = (item.ratio * 100).toFixed(2) + "%";
            });
            this.provincesList = list;
          }
        })
        .catch(error => {});
    },
    //获取地图信息
    getMap(callback) {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getAllSMRCountData",
          query: {
            marketId: this.$store.state.id,
            startTime: this.startMonth,
            endTime: this.endMonth
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            let keysMapNum = res.data.data.length;
            this.mapNum = keysMapNum;
            console.log(res.data.data);
            if (res.data.data.length == 0) {
              return;
            }
            this.mapList = res.data.data;
            console.log(res.data.data);
            callback();
          }
        })
        .catch(error => {});
    },
    //数字字典获取指标
    getindicator() {
      let categoryId = this.$store.state.itemData.market.categoryId;
      console.log(categoryId);
      this.$http
        .post(this.GLOBAL.host, {
          method: "getCategoryNormRelation",
          query: {
            categoryId: categoryId
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.indicatorOption = res.data.data;
            this.norm1 = res.data.data[0].norm;
          }
        })
        .catch(error => {});
    },
    //获取区域分布下方列表
    getBottomModel() {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getSMRData",
          query: {
            marketId: this.$store.state.id,
            pageSize: 10,
            pageNo: this.page,
            startTime: this.startMonth,
            endTime: this.endMonth
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            let list = res.data.data.list;
            list.map((item, index) => {
              item.ratio = (item.ratio * 100).toFixed(2) + "%";
            });
            this.areaList = list;
            console.log(res.data.data);
            this.totalPage = res.data.data.total;
          }
        })
        .catch(error => {});
    },
    //获取价格中间柱形图销量销售额
    getBar(e, callback) {
      console.log(e);
      this.$http
        .post(this.GLOBAL.host, {
          method: "getSMPSCountData",
          query: {
            marketId: this.$store.state.id,
            startTime: this.startMonth1,
            endTime: this.endMonth1
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            console.log(res.data.data)
            let data = res.data.data;
            this.objData = data;
            let amountCount1 = res.data.data.length;
            this.amountCount = amountCount1;
            if (res.data.data.length == 0) {
              return;
            }
            let arrLegend = [];
            let arrPrice = [];
            let numArr = [];
            let obj = {};
            let obj1 = {};
            console.log(data);
            for (let i in data) {
              if (obj[data[i].priceSegment] == undefined) {
                obj[data[i].priceSegment] = [];
              }
              obj[data[i].priceSegment].push(data[i].brandName);
              if (obj1[data[i].brandName] == undefined) {
                obj1[data[i].brandName] = [];
              }
              obj1[data[i].brandName].push(
                e == "销售额" ? data[i].salesAmount : data[i].salesCount
              ); //销售额与销售量
            }
            console.log(obj1)
            function sortObj(obj) {
              console.log(obj)
              var arr = [];
              for (var i in obj) {
                console.log([obj[i]])
                arr.push([obj[i], i]);
              }
              arr.sort(function(a, b) {
                console.log(a,'hhhhhhh',b)
                return a[1].split("-")[0] - b[1].split("-")[0];
              });
              console.log(arr)
              var len = arr.length,

                obj = {};
              for (var i = 0; i < len; i++) {
                console.log(arr[i][0])
                obj[arr[i][1]] = arr[i][0];
              }
              return obj;
            }
            obj = sortObj(obj);
            //取每个品牌下得价格段
            for (let c in obj1) {
              for(let d in obj1[c]){
                  if(obj1[c][d]==null){
                    obj1[c][d]=0
                  }
              }
              numArr.push({
                name: c,
                type: "bar",
                barWidth: "10px",
                data: obj1[c]
              });
            }
            this.numArr1 = numArr;
            //取品牌
            for (let a in obj) {
              arrLegend.push(obj[a]);
              arrPrice.push(a);
            }
            this.brandArrLegend = arrLegend[0];
            this.priceArr = arrPrice;
            callback();
          }
        })
        .catch(error => {});
    },
    //获取价格下方列表
    getPriceBottom() {
      console.log(1);
      this.$http
        .post(this.GLOBAL.host, {
          method: "getSMPSSummaryData",
          query: {
            marketId: this.$store.state.id,
            startTime: this.startMonth1,
            endTime: this.endMonth1,
            pageNo: this.pricePage,
            pageSize: 10
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            let list = res.data.data.list;
            list.map((item, index) => {
              item.amountRatio = (item.amountRatio * 100).toFixed(2) + "%";
              item.oneMonthRatio = (item.oneMonthRatio * 100).toFixed(2) + "%";
            });
            this.priceData = list;

            this.totalPricePage = res.data.data.total;
          }
        })
        .catch(error => {});
    },
    //获取圆形图数据
    getPieDage() {
      console.log(2);
      this.pricePieData = [];
      this.$http
        .post(this.GLOBAL.host, {
          method: "getSMPSData",
          query: {
            marketId: this.$store.state.id,
            startTime: this.startMonth1,
            endTime: this.endMonth1
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            let piePriceNum1 = res.data.data.length;
            this.piePrice = piePriceNum1;
            if (res.data.data.length == 0) {
              return;
            }
            this.pricePieData = res.data.data;
          }
        })
        .catch(error => {});
    },
    //获取角色管理下的饼状图
    getRolePie() {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getSMTData",
          query: {
            marketId: this.$store.state.id,
            norm: this.norm1
            // startTime: this.startMonth,
            // endTime: this.endMonth
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            let techPie = res.data.data.length;
            this.techPieNum = techPie;
            if (res.data.data.length == 0) {
              return;
            }
            this.roleData = res.data.data;
          }
        })
        .catch(error => {});
    },
    //获取角色管理下的线性图
    getRoleData(callback) {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getSMTCountData",
          query: {
            marketId: this.$store.state.id,
            norm: this.norm1
            // startTime: this.startMonth,
            // endTime: this.endMonth
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            let techstack = Object.keys(res.data.data).length;
            this.techstackNum = techstack;
            if (techstack == 0) {
              return;
            }
            let data = res.data.data;
            let arrs = [];
            let legendData = [];
            for (var i in data) {
              legendData.push(i);
              let name = i;
              let countArr = [];
              let timeLine = [];
              for (var a in data[i]) {
                countArr.push(data[i][a].count);
                timeLine.push(data[i][a].dateTime);
              }
              this.timeLine = timeLine;
              arrs.push({
                name: i,
                type: "line",
                stack: "总量",
                areaStyle: { normal: {} },
                data: countArr
              });
            }
            this.stackArr = arrs;
            this.leData = legendData;
            callback();
          }
        })
        .catch(error => {});
    },
    //获取角色管理下的技术分布列表
    getRoleList() {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getSMTSummaryData",
          query: {
            marketId: this.$store.state.id,
            norm: this.norm1,
            pageNo: this.techPage,
            pageSize: 10
            // startTime: this.startMonth,
            // endTime: this.endMonth
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            let ratios1 = Object.keys(res.data.data.ratios).length;
            this.ratios2 = ratios1;
            if (ratios1 == 0) {
              return;
            }
            this.roleListStart = res.data.data.label;
            let arr = [];
            this.totalTechPage = res.data.data.total;
            let arr111 = [];
            let abc = res.data.data.ratios;
            for (let i in abc) {
              let arr11 = [];
              let label = res.data.data.label;
              let c1 = abc[i];
              c1.unshift({
                ratio: i,
                brandName: "技术点"
              });
              for (let a in label) {
                let c2 = c1.find(x => x.brandName == label[a]);
                if (c2) {
                  arr11.push(c2);
                } else {
                  arr11.push({
                    norm: "",
                    technology: "",
                    count: "",
                    ratio: "",
                    brandName: "",
                    dateTime: ""
                  });
                }
              }
              arr111.push(arr11);
              this.cont111 = arr111;
            }
          }
        })
        .catch(error => {});
    }
  },

  watch: {
    norm1(newValue, oldValue) {
      console.log(newValue, oldValue);
      if (newValue) {
        //获取角色管理下的饼状图
        this.getRolePie();
        //获取角色管理下的列表
        this.techPage = 1;
        this.getRoleList();
        //获取线性图
        this.getRoleData(() => {
          this.drawStack();
        });
      }
    }
  }
};
</script>
  <style lang="less">
.getH {

  .oneTable{
    width: 100%;
    margin-top: 20px;
   border:1px solid #ebeef5
  }

  .el-table::before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0 !important;
  }
  .active3 {
    background: #d9effc;
    color: #39b3f5;
  }
  .el-tabs__content {
    background: #fff !important;
  }
  .naviga {
    width: 100%;
    height: 35px;
    line-height: 35px;
    padding-left: 5px;
    background-color: white;
    font-size: 14px;
    border-bottom: 2px solid #e3e3e3;
  }
  .cell {
    text-align: center;
  }
  .margin-top1 {
    width: 97.65%;
    margin: auto;
    background: #fff;
    > div:nth-child(1) {
      > span {
        line-height: 70px;
      }
      > ul {
        margin-top: 12px;
        border: 5px;
      }

      p {
        text-align: center;
        margin: 0;
        font-size: 12px;
        color: #4d4d4d;
        border-radius: 5px;
        padding: 5px 0;
      }
    }
  }
  .table-bottom {
    width: 100%;
    overflow-x: scroll;
    margin-bottom: 20px;
    .sec {
      display: flex;
      border: 1px solid #eee;
      height: 40px;
      // width: 1500px;
      > p {
        text-align: center;
        width: 14.3%;
        line-height: 40px;
        border-right: 1px solid #eee;
        margin-bottom: 0;
      }
    }
    > .sec:nth-child(1) {
      background: -webkit-linear-gradient(bottom, #e1eff7 0%, #fcfefe 100%);
    }
    > .sec1 {
      background: #eff7fc;
    }
  }
  /*分页样式start*/
  .page-warp {
    position: relative;
    height: 40px;
    margin: 10px 0;
    > h2 {
      position: absolute;
      left: 20px;
      line-height: 40px;
    }
    > .paging {
      position: absolute;
      float: right;
      right: 20px;
      color: #676767;
      display: flex;
      margin-top: 5px;
      .first-page {
        position: absolute;
        width: 53px;
        height: 32px;
        background: #fff;
        border: 1px solid #ebebeb;
        font-size: 14px;
        text-align: center;
        line-height: 32px;
      }
      .el-pagination {
        padding: 0 0 0 53px;
        height: 32px;
        line-height: 32px;
        border-top: 1px solid #ebebeb;
        border-bottom: 1px solid #ebebeb;
      }
      .el-pager {
        background: #fff;
        height: 28px;
        li {
          padding: 0;
          border-right: 1px solid #ebebeb;
          background: #fff;
          margin: 0;
        }
      }
      .btn-prev {
        border-right: 1px solid #ebebeb;
        color: #676767;
        background: #fff;
        margin: 0;
        padding: 0 5px;
      }
      .btn-next {
        border-right: 1px solid #ebebeb;
        color: #676767;
        background: #fff;
        margin: 0;
        padding: 0 5px;
      }
    }
  }

  /*分页样式end*/
  .pull-right {
    display: flex;
    margin-top: 10px;
    > span {
      line-height: 50px;
    }
    .data-month {
      width: 75%;
      border: 1px solid #cccccc;
      display: flex;
      padding-left: 10px;
      height: 50px;
      padding-left: 0;
      > span {
        line-height: 50px;
      }
      .el-input {
        width: 40%;
        border: none;
        margin-top: 5px;
        .el-input__inner {
          padding: 0;
          text-align: center;
          border: none;
          cursor: pointer;
        }
        .el-input__icon {
          display: none;
        }
      }
    }
    .data-month1 {
      width: 75%;
      border: 1px solid #cccccc;
      display: flex;
      padding-left: 10px;
      height: 50px;
      padding-left: 0;
      > span {
        line-height: 50px;
      }
      .el-input {
        width: 80%;
        border: none;
        margin-top: 5px;
        .el-input__inner {
          padding: 0;
          text-align: center;
          border: none;
        }
        .el-input__icon {
          display: none;
        }
      }
    }
  }
  .all {
    background: #fff;
  }
  .margin-top {
    padding: 0;
  }
  .pie {
    height: 320px;
    background: #ffffff;
  }
  .bar {
    background: #ffffff;
    margin-top: 20px;
    position: relative;
    .bar-btn {
      left: 20px;
      top: 20px;
      z-index: 2;
      display: flex;
      > p {
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        border-radius: 2px;
        border: 1px solid #cccccc;
        cursor: pointer;
      }
    }
    .el-button-group {
    }
  }
  .el-tabs__content {
    padding: 0;
    background: #f6f6f6;
  }
  .top-bar {
    font-size: 14px;
    display: flex;
    align-items: center;

    > img {
      width: 18px;
      height: 18px;
      margin: 0 10px 0 20px;
      vertical-align: center;
    }
    > p:nth-child(2) {
      > span {
        color: #ffc323;
      }
      line-height: 40px;
      margin: 0;
    }
    > p:nth-child(3) {
      padding: 10px;
      margin: 10px 20px;
      background: -o-linear-gradient(left, #3fcce1, #03a9f4);
      background: -moz-linear-gradient(left, #3fcce1, #03a9f4);
      background: -ms-linear-gradient(left, #3fcce1, #03a9f4);
      background: linear-gradient(left, #3fcce1, #03a9f4);
      border-radius: 6px;
      color: #fff;
    }
  }
  .second-bar {
    height: 80px;
    background: #f6f6f6;
    display: flex;
    align-items: center;
  }
  .aaa {
    .el-input__inner {
      border: none;
    }
  }
  .first {
    background: #ffe7eb;
  }
  .second {
    background: #e0f2fd;
  }
  .three {
    background: #dcf6e8;
  }
  .bottomBak {
    background: #e1eff7;
  }
  .priceAnalysis {
    position: absolute;
    left: 20px;
    top: 20px;
    > p {
      float: left;
      border: 1px solid #eeeeee;
      padding: 5px 10px;
    }
  }
  .bor {
    position: relative;
    .indicators-wrap {
      position: absolute;
      right: 0;
      top: 5px;
      z-index: 1;
      > span {
        padding-right: 10px;
      }
    }
    .el-tabs__header {
      height: 50px;
    }
    .el-tabs__item {
      height: 50px;
      line-height: 50px;
    }
  }
}
</style>
